<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <Table
      :table-data="tableData"
      :row-header="rowHeader"
      :page-obj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(0, 0, 0, 0.1)"
    />
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import Table from '@/components/Table'
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    Table
  },
  data() {
    return {
      tableData: [
        {
          id: 0,
          title: '任务123',
          project: '项目1',
          charge: '张三',
          type: '任务',
          creatTime: '3小时前',
          state: '已完成',
          planTime: '2121.12.21',
          operate: '操作'
        },
        {
          id: '1',
          title: '任务456',
          project: '测试',
          charge: '李四',
          type: '任务',
          creatTime: '三天前',
          state: '未完成',
          planTime: '2021.11.23',
          operate: '操作'
        }
      ],
      rowHeader: [
        {
          label: '标题',
          width: '25px',
          prop: 'title',
          render: (params, index) => {
            return (
              index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.size
            )
          }
        },
        {
          prop: 'project',
          label: '项目'
        },
        {
          prop: 'charge',
          label: '负责人'
        },
        {
          prop: 'type',
          label: '类型'
        },
        {
          prop: 'state',
          label: '状态'
        },
        {
          prop: 'creatTime',
          label: '创建时间'
        },
        {
          prop: 'planTime',
          label: '计划时间'
        }
      ],
      pageObj: {
        total: 0,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1
      }
    }
  },
  methods: {
    handleCurrentChange() {},
    handleSizeChange() {}
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
